
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slides, A Slideshow Plugin for jQuery</title>

<script src="js/slideImage/jquery.min.js"></script>
<script src="js/slideImage/slides.min.jquery.js"></script>
<script>
	$(function() {
		$('#slides').slides({
			preload : true,
			preloadImage : 'image/slideIm/loading.gif',
			play : 5000,
			pause : 2500,
			hoverPause : true,
			animationStart : function(current) {
				$('.caption').animate({
					bottom : -35
				}, 100);
				if (window.console && console.log) {
					// example return of current slide number
					console.log('animationStart on slide: ', current);
				}
				;
			},
			animationComplete : function(current) {
				$('.caption').animate({
					bottom : 0
				}, 200);
				if (window.console && console.log) {
					// example return of current slide number
					console.log('animationComplete on slide: ', current);
				}
				;
			},
			slidesLoaded : function() {
				$('.caption').animate({
					bottom : 0
				}, 200);
			}
		});
	});
</script>
</head>
<style>
.pagination li a {
	display: block;
	width: 12px;
	height: 0;
	padding-top: 12px;
	background-image: url("image/slideIm/pagination.png");
	background-position: 0 0;
	float: left;
	overflow: hidden;
	background-image: url("image/slideIm/pagination.png");
}
</style>
<body>
	<div id="container1">
		<div id="example1">
			<div id="slides">
				<div class="slides_container">
					<div class="slide">
						<a href="" target="_blank"><img src="image/slideIm/slide6.jpg"
							width="197" height="396" alt="Slide 6"></a>
					</div>
					<div class="slide">
						<a href="" target="_blank"><img src="image/slideIm/slide7.jpg"
							width="197" height="396" alt="Slide 7"></a>
					</div>
					<div class="slide">
						<a href="" target="_blank"><img src="image/slideIm/slide1.jpg"
							width="197" height="396" alt="Slide 1"></a>
					</div>
					<div class="slide">
						<a href="" target="_blank"><img src="image/slideIm/slide2.jpg"
							width="197" height="396" alt="Slide 2"></a>
					</div>
				</div>
			</div>
			<img src="image/slideIm/example-frame.png" alt="Example Frame"
				id="frame1">
		</div>
	</div>
</body>
</html>
